<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
    #myCanvas{
        margin:auto;
        /*border:1px solid;*/
        box-shadow: 0 0 10px #999;
    }
</style>
<body>
    <canvas id="myCanvas" height="500" width="600">

    </canvas>
</body>

<script>
    var myCanvas = document.getElementById("myCanvas");
    if(!myCanvas.getContext){
        alert("浏览器不支持");
    }
    var txt = myCanvas.getContext("2d");
    function Main(x,y,width,height,color,speedY) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color = color;
        this.speedY = speedY;
        // move(y,2)
    }

    Main.prototype.createSqu = function(){//创建
        txt.beginPath();
        txt.fillStyle = this.color;
        txt.fillRect(this.x,this.y,this.width,this.height);
        txt.strokeRect(this.x,this.y,this.width,this.height);
    };


    Main.prototype.move = function () {//移动
        this.y += this.speedY;
        // console.log(this.y)
        if(this.y>myCanvas.height-this.height+100){
            // alert("gameOver")
            this.y = -100;
            this.x = random();
            // return;
            // this.speedY *= -1
        }else if(this.y<this.r){
            this.speedY *=  -1
        }

    };

    function createNumSqu(num) {
        if(num>=100){
            return new Main(random(),-100,50,100,"red",2);
        }
    }

    // var squ1 = new Main(random(),-100,50,100,"red",2);

    var squ1 = new Main(random(),-100,50,100,"red",2);
    var squ2 = new Main(random(),-200,50,100,"red",2);
    var squ3 = new Main(random(),-300,50,100,"red",2);
    var squ4 = new Main(random(),-400,50,100,"red",2);

    // setInterval(function () {
    //     squ1 = new Main(random(),0,50,100,"red",2);
    // },300)
    var k = squ1.y;
        function animation(){
        txt.clearRect(0,0,myCanvas.width,myCanvas.height);

        squ1.createSqu();
        squ1.move();

            squ2.createSqu();
            squ2.move();

            squ3.createSqu();
            squ3.move();
            squ4.createSqu();
            squ4.move();
        window.requestAnimationFrame(animation)
    }
    animation();

    function random() {//随机数
        // x*70,y*100
        return Math.round(Math.random()*5)*70
    }

    // move(2,2)

</script>
</html>
